
<form nz-form #validateForm="ngForm" (ngSubmit)="submitForm()" nzLayout="horizontal" autocomplete="off">
    <!-- 模态框头部 -->
    <div class="modal-header">
        <div class="modal-title">
            <i class="iconfont icon-medicine-box mr-sm"></i>
            <span *ngIf="entity.id">{{l('Edit')}}</span>
            <span *ngIf="!entity.id">{{l('Create')}}</span>
        </div>
    </div>
    <!-- 模态框内容 -->
    <fieldset>
        <!-- 提示信息 -->
        <!-- <nz-alert nzType="info" nzCloseable [nzShowIcon]="true" nzMessage="l('我想提示点什么内容给你说')"></nz-alert> -->
                   <!-- 书单名称 : ListName 的控件范围=Start= -->
                <nz-form-item nz-row>
                        <nz-form-label nz-col [nzSm]="6" [nzXs]="24" nzRequired nzFor="listName">
                            {{l('BookListListName')}}
                        </nz-form-label>
                    <nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <!--  控件位置 -->
                                <input nz-input name="listName" #listName="ngModel"
                                       [(ngModel)]="entity.listName"
                                      [placeholder]="l('BookListListNameInputDesc')"  required  maxlength='50'  minlength='1' >

                                <!-- 校验 -->
                                <nz-form-explain *ngIf="listName.control.dirty
                                                 &&listName.control.errors">
<ng-container *ngIf="listName.control.hasError('maxlength')">{{l('MaxLength')+50}}</ng-container>                                    <ng-container *ngIf="listName.control.hasError('minlength')">{{l('MinLength')+1}}</ng-container>                                    <ng-container *ngIf="listName.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>                                </nz-form-explain>

                    </nz-form-control>
             
                </nz-form-item>
                <!--书单名称 : ListName 的控件范围结束=END= -->
                   <!-- 简介 : Intro 的控件范围=Start= -->
                <nz-form-item nz-row>
                        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="intro">  
                            {{l('BookListIntro')}}
                            </nz-form-label>
                    <nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <!--  控件位置 -->
                                <textarea nz-input name="intro" #intro="ngModel"
                                          [(ngModel)]="entity.intro"
                                           [placeholder]="l('BookListIntroInputDesc')" nzAutosize  maxlength='200'  minlength='10' ></textarea>

                                <!-- 校验 -->
                                <nz-form-explain *ngIf="intro.control.dirty
                                                 &&intro.control.errors">
<ng-container *ngIf="intro.control.hasError('maxlength')">{{l('MaxLength')+200}}</ng-container>                                    <ng-container *ngIf="intro.control.hasError('minlength')">{{l('MinLength')+10}}</ng-container>                                                                    </nz-form-explain>

                    </nz-form-control>
             
                </nz-form-item>
                <!--简介 : Intro 的控件范围结束=END= -->
                   <!-- BookListAndBooks : BookListAndBooks 的控件范围=Start= -->
                <nz-form-item nz-row>
                        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="bookListAndBooks">  
                            {{l('BookListAndBooks')}}
                            </nz-form-label>
                    <nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                        <!--  控件位置 -->
                                <nz-select name="bookListAndBooks" #bookListAndBooks="ngModel"
                                           [(ngModel)]="entity.bookListAndBooks" nzAllowClear
                                           [nzPlaceHolder]="l('PleaseSelectAtLeastOneItem')"  style="width: 120px;">
                                    <!-- 请配置你的数据源 -->
                                    <!-- <nz-option *ngFor="let option of optionList" [nzValue]="option" [nzLabel]="option.label">
                                    </nz-option>                    -->
                                </nz-select>


                    </nz-form-control>
             
                </nz-form-item>
                <!--BookListAndBooks : BookListAndBooks 的控件范围结束=END= -->

    </fieldset>
    <!-- 模态框底部 -->
    <div class="modal-footer">
        <button nz-button [nzType]="'default'" type="button" (click)="close()" [disabled]="saving">
            <i class="iconfont icon-close-circle"></i> {{l("Cancel")}}
        </button>
        <button nz-button [nzType]="'primary'" type="submit" [disabled]="!validateForm.form.valid|| saving" [nzLoading]="saving">
            <i class="iconfont icon-save" *ngIf="!saving"></i> {{l("Save")}}
        </button>
    </div>
</form>